<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 600px;
            margin: 50px auto;
        }

        .msgBox {
            margin-top: 50px;
        }

        .msgBox>.title,
        .msgBox .sub {
            display: flex;
            background: #000;
        }

        .msgBox span {
            flex: 1;
            text-align: center;
            line-height: 30px;
            color: #fff;
            border: 1px solid #fff;
        }

        .shadow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .shadow .addMsg {
            color: #fff;
            padding: 150px;
            background-color: #000;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .shadow .addMsg p {
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <p>
            <button id="add">新增</button>
        </p>

        <div class="msgBox">
            <div class="title">
                <span>姓名</span>
                <span>年龄</span>
                <span>删除</span>
                <span>编辑</span>
            </div>
            <div class="content">
                <!-- <div class="sub">
                    <span>111</span>
                    <span>2222</span>
                    <span>删除</span>
                    <span>编辑</span>
                </div> -->
            </div>
        </div>
    </div>
    <div class="shadow">
        <div class="addMsg">
            <p>
                <label for="user">姓名</label>
                <input id="user" type="text">
            </p>
            <p>
                <label for="age">年龄</label>
                <input id="age" type="text">
            </p>
            <p><input type="button" id="send" value="确定">
                <input type="button" id="cancel" value="取消">
            </p>
        </div>
    </div>
</body>
<script>
   var addBtn=document.getElementById("add");
   var shadowB=document.getElementsByClassName("shadow")[0];
   var sendB=document.getElementById("send")
   var userB=document.getElementById("user");
   var ageB=document.getElementById("age");
   var contentD=document.getElementsByClassName("content")[0];
   var cancelB=document.getElementById("cancel");
//    var deleteB=contentD.getElementsByTagName("span")
  var userlist=[]; 
   addBtn.onclick=function (){
       shadowB.style.display="block";
       sendB.onclick=fn
   }
   
   sendB.onclick=fn
   function fn(){
       var userValue=userB.value;
       var ageValue=ageB.value;
    if(userlist.indexOf(userValue)==-1){
    var sub=document.createElement("div");
    var userspan=document.createElement("span");
    userspan.innerHTML=userValue
    sub.appendChild(userspan)
    var agespan=document.createElement("span");
    agespan.innerHTML=ageValue
    sub.appendChild(agespan)
    var deletespan=document.createElement("span");
    deletespan.innerHTML="删除"
    
    deletespan.onclick=function(){
        if(confirm("确定要删除我么?")){
            userspan.parentElement.remove()
        }
    }
    sub.appendChild(deletespan)
    var editspan=document.createElement("span");
    editspan.innerHTML="编辑"
    sub.appendChild(editspan)
    editspan.onclick=function (){
       userB.value=userspan.innerHTML
       ageB.value=agespan.innerHTML
       shadowB.style.display="block";
       sendB.onclick=function (){
        var userValue=userB.value;
        var ageValue=ageB.value; 
        userspan.innerHTML=userValue;
        agespan.innerHTML=ageValue;
        shadowB.style.display="none";
        userB.value=""
        ageB.value=""
       }
    }
    }
    else{
        alert("用户名重复")
    }

    sub.className="sub"
    // console.log(sub)
    contentD.appendChild(sub)
    userlist.push(userspan.innerHTML)
    shadowB.style.display="none";
     userB.value="";
     ageB.value="";
   }
   cancelB.onclick=function(){
    shadowB.style.display="none";
     userB.value=""
     ageB.value=""
    } 
</script>

</html>